<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath }"></c:set>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>控制台</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- bootstrap css -->
<link rel="stylesheet"
	href="${ctx}/template/assets/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="${ctx}/template/assets/css/font-awesome.min.css" />
<!-- jquery ui grid css -->
<link rel="stylesheet"
	href="${ctx}/template/assets/css/jquery-ui-1.10.3.full.min.css" />
<!-- do not kown  -->
<link rel="stylesheet"
	href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" />
<!-- ace ss -->
<link rel="stylesheet" href="${ctx}/template/assets/css/ace.min.css" />
<link rel="stylesheet" href="${ctx}/template/assets/css/ace-rtl.min.css" />
<link rel="stylesheet"
	href="${ctx}/template/assets/css/ace-skins.min.css" />


<style type="text/css">
#dialog {
	display: none;
	width: 600px;
	height: 400px;
}
</style>
</head>
<body onload="initTree();">

	<div class="page-content">
		<div class="row">
			<div class="widget-box">
				<div class="widget-header header-color-green2">
					<h4 class="lighter smaller">逗逗运营平台资源列表</h4>
				</div>

				<div class="widget-body">
					<div class="widget-main padding-8">
						<div id="tree2" class="tree"></div>
					</div>
				</div>
			</div>
		</div>

		<!-- 弹出层 -->
		<a class="btn" onclick="resourceDialog()">新增资源</a>
		<!-- Modal -->
		<div id="dialog" class="row">
			<div class="col-xs-12">
				<form id="add_form" class="form-horizontal" role="form">
				    <div class="form-group">
						<label class="col-sm-3 control-label no-padding-right"
							for="form-field-1">上层菜单</label>
						<div class="col-sm-9">
						<select class="col-sm-5" id="parentId" name="parentId">
						</select>
						</div>
					</div>
				    
				
					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right"
							for="form-field-1">资源名</label>

						<div class="col-sm-9">
							<input type="text" name="resourceName" id="resourceName"
								placeholder="资源名" class="col-xs-10 col-sm-5" />
						</div>
					</div>

					<div class="space-4"></div>

					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right"
							for="form-field-1">资源描述</label>

						<div class="col-sm-9">
							<input type="text" name="resourceDescribed"
								id="resourceDescribed" placeholder="资源名"
								class="col-xs-10 col-sm-5" />
						</div>
					</div>

					<div class="space-4"></div>

					<div class="form-group">
						<label class="col-sm-3 control-label no-padding-right"
							for="form-field-1">资源地址</label>

						<div class="col-sm-9">
							<input type="text" name="resourceUrl" id="resourceUrl"
								placeholder="资源地址" class="col-xs-10 col-sm-5" />
						</div>
					</div>

					<div class="clearfix form-actions">
						<div class="col-md-offset-3 col-md-9">
							<button class="btn btn-info" type="button"
								onclick="addResource();">
								<i class="icon-ok bigger-110"></i> 提交
							</button>
							&nbsp; &nbsp; &nbsp;
							<button class="btn" type="reset">
								<i class="icon-undo bigger-110"></i> 清空
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
	<jsp:include page="../common/import.jsp" />
	<script type="text/javascript">
	
	function resourceDialog() {
		createDialog("新增资源");
		$("#resourceType").val(1);
		$('#dialog').dialog('open');
		return false;
	}
	
	function addResource(){
		$.ajax({
			type : "POST",
			url : "${ctx}/admin/user/addResource",
			data : $("#add_form").serialize(),
			dataType : "json",
			success : function(data) {
				if(data.code==1){
					$('#dialog').dialog('close');
					$("#add_form")[0].reset(); 
					location.reload() ;
				}else{
					alert(data.message);
				}
			}
		});
	}
	
	function  createDialog(title) {
		$('#dialog').dialog({
			autoOpen : false,//如果设置为true，则默认页面加载完毕后，就自动弹出对话框；相反则处理hidden状态。 
			bgiframe : true, //解决ie6中遮罩层盖不住select的问题  
			width : 500,
			modal : true,
			title:title
		});
	}
	
		function loadResource(callback) {
			$("#parentId").html('');
			$("#parentId").append('<option value="0">一级菜单</option>');
			$.ajax({
				type : "GET",
				url : "${ctx}/admin/user/getAllResource",
				dataType : "json",
				success : function(data) {
					var temp = data.data;
					if (!temp) {
						return;
					}
						var temp1 = '{';
						for (var i = 0; i < temp.length; i++) {
							var first=temp[i].first;
							$("#parentId").append('<option value="'+first.resourceId+'">'+first.resourceName+'</option>');
							temp1 += '"'+ first.resourceName+ '":'+ resource(first.resourceName, 'folder',
											'green', temp[i].seconds);
							if (i < temp.length - 1) {
								temp1 += ",";
							}
						}
						temp1 += "}";
						var json = $.parseJSON(temp1);
						console.log(json);
						callback(json);
				}
			});
		}

		//拥有父目录的
		function resource(name, type, icon, seconds) {
			var obj = new Object();
			if(seconds!=null||seconds.length!=0){
				obj.additionalParameters = additionalParameters(seconds);
			}
			obj.name = name;
			obj.type = type;
			if (type == 'folder') {
				obj.myicon = icon;
			}
			var res = JSON.stringify(obj);
			res = res.replace('myicon', 'icon-class');
			return res;
		}

		function additionalParameters(seconds) {
			var obj = new Object();
			obj.children = initSec(seconds);
			return obj;
		}

		function initSec(child) {
			var array =[];
			for(var i=0;i<child.length;i++){
				array.push(seconds(child[i].resourceName,'item'));
			}
			return array;
		}

		function seconds(name,type){
			var obj = new Object();
			obj.name = name;
			obj.type = type;
			return obj;
		}
		
		function initTree() {
			loadResource(function(res) {
						var DataSourceTree = function(options) {
							this._data = options.data;
							this._delay = options.delay;
						}

						DataSourceTree.prototype.data = function(options,
								callback) {
							var self = this;
							var $data = null;

							if (!("name" in options) && !("type" in options)) {
								$data = this._data;//the root tree
								callback({
									data : $data
								});
								return;
							} else if ("type" in options
									&& options.type == "folder") {
								if ("additionalParameters" in options
										&& "children" in options.additionalParameters)
									$data = options.additionalParameters.children;
								else
									$data = {}//no data
							}

							if ($data != null)//this setTimeout is only for mimicking some random delay
								setTimeout(function() {
									callback({
										data : $data
									});
								}, parseInt(Math.random() * 500) + 200);
						};

						var treeDataSource2 = new DataSourceTree({
							data : res
						});
						$('#tree2')
								.ace_tree(
										{
											dataSource : treeDataSource2,
											loadingHTML : '<div class="tree-loading"><i class="icon-refresh icon-spin blue"></i></div>',
											'open-icon' : 'icon-folder-open',
											'close-icon' : 'icon-folder-close',
											'selectable' : false,
											'selected-icon' : null,
											'unselected-icon' : null
										});
					});
		}
	</script>
</body>
</html>

